<template>
  <div class="movielist">
    <ul>
      <li v-for="(movie, index) in movieList" :key="movie.id" class="movieItem" @click="toDetail(movie.id)">
        <div class="movieImg">
          <img :src="movie.img" alt="">
        </div>
        <div class="movieInfo">
          <p class="movieName">{{movie.nm}}</p>
          <p class="movieScore">评分：<span>{{movie.sc}}</span></p>
          <p class="movieStar">主演： {{movie.star}}</p>
          <p class="movieShowInfo">{{movie.showInfo}}</p>
        </div>
      </li>
    </ul>
    <div class="loading" v-show="showLoading">
      <img src="../../assets/img/loading.gif" alt="">
    </div>
    <div v-show="tip" class="tip">
      <h4>已经到底了^-^</h4>
    </div>
  </div>

</template>

<script>
import Axios from 'axios';
export default {
  data() {
    return {
      movieList: [],
      showLoading: true,
      tip: false
    };
  },
  mounted() {
    this.loadDate();
    // 监听滚动条
    window.onscroll = () => {
      let clientHeight = document.documentElement.clientHeight;
      let scrollTop = document.documentElement.scrollTop;
      let scrollHeight = document.documentElement.scrollHeight;
      if (clientHeight + scrollTop == scrollHeight) {
        this.showLoading = true;
        if (!this.tip) {
          this.loadDate();
        } else {
          this.showLoading = false;
        }
      }
    };
  },
  methods: {
    loadDate() {
      let url = '/static/data/moviedata.json';
      Axios.get(url)
        .then(res => {
          let list = res.data.movieList;
          let data = list.slice(this.movieList.length, this.movieList.length + 5);
          this.movieList = this.movieList.concat(data);
          this.showLoading = false;
          if (data.length < 5) {
            this.tip = true;
          }
        })
        .catch(() => {
          alert('获取数据失败，请检查你的网络是否通畅');
        });
    },
    toDetail(id) {
      console.log(id);
      this.$router.push('/movie/movieDetail/' + id);
    }
  }
};
</script>

<style  scoped>
.movielist {
  margin: 1.4rem 0;
}
.movieItem {
  padding: 0 0.2rem;
  margin: 0.4rem 0;
  display: flex;
}
.movieImg {
  flex-grow: 1.5;
  width: 0;
}
.movieImg img {
  width: 100%;
}
.movieInfo {
  flex-grow: 3;
  width: 0;
  margin-left: 0.15rem;
  line-height: 0.7rem;
  border-bottom: 1px solid #ccc;
}
.movieName {
  font-weight: bolder;
}
.movieScore {
  font-size: 0.25rem;
}
.movieScore span {
  color: #f00;
}
.movieStar {
  font-size: 0.15rem;
  /* 多余文字省略号显示 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.movieShowInfo {
  font-size: 0.2rem;
}
.loading {
  text-align: center;
  /* position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
}
.tip {
  text-align: center;
}
</style>